<template>
  <view style="min-height: 100vh;background-color: #fafafa;">
    <view class="page">
      <!-- 添加私人顾问 -->
      <view class="container" style="width: 100%;padding-top: 58rpx;">
        <view class="header" @click="showModal = true;bgi='2';">
          <view class="left">添加私人健康顾问，解读报告</view>
          <view class="right">></view>
        </view>
      </view>

      <view class="modal-content_" :style="{backgroundImage: 'url('+bgi_bg[2]+')' }">

        <view style="padding: 30rpx;">您的更年版肠道菌群检测报告：</view>

        <view v-if='!has_a'>
          <view style="padding: 17rpx 30rpx;font-weight: 900;font-size: 40rpx;">暂无记录</view>
          <view class="wzbj">
            <view class="container">
              <view class="text-content">
                <text class="main-text">{{date_time}}</text>

                <!-- <text class="sub-text">这里是辅助文字说明</text> -->
              </view>
              <image class="right-image" style="height: 92rpx;bottom: 134rpx;" @click="scanbar()"
                src="https://sp.x-fmt.com//uploads/attach/2025/08/20250805/18a1dd9fec7597f9ad4821529d7e8469.png"
                mode="aspectFit"></image>
              <image class="right-image" style="height: 135rpx;" @click="toDetail(goods_details_a)"
                src="https://sp.x-fmt.com//uploads/attach/2025/07/20250725/d346bfae13cbe2ce489028dc91c0bfae.png"
                mode="aspectFit"></image>
            </view>
          </view>
        </view>
        <view v-else>
          <view style="padding: 17rpx 30rpx;font-weight: 900;font-size: 40rpx;">
            <view class="text-content">
              <text class="main-text">{{score_a}}</text>
              <text class="sub-text" style="font-size: 25rpx;"> /100分</text>
            </view>
          </view>
          <view class="wzbj">
            <view class="container">
              <view class="text-content">
                <text class="main-text">{{a_time}}</text>
                <!-- <text class="sub-text">这里是辅助文字说明</text> -->
              </view>
              <image class="right-image" @click="showModal = true;bgi='1';"
                src="https://sp.x-fmt.com//uploads/attach/2025/07/20250725/152f6c851dfe983192aa51759270bbf8.png"
                mode="aspectFit"></image>
            </view>
          </view>
        </view>

      </view>

      <view class="modal-content_" :style="{backgroundImage: 'url('+bgi_bg[1]+')' }"
        style="background-size:107% auto; background-repeat:no-repeat;">

        <view style="padding: 17rpx  30rpx;">您的NAD+检测报告：</view>

        <view v-if="!has_b">
          <view style="padding: 30rpx;font-weight: 900;font-size: 40rpx;">暂无记录</view>
          <view class="wzbj">
            <view class="container">
              <view class="text-content">
                <text class="main-text">{{date_time}}</text>
                <!-- <text class="sub-text">这里是辅助文字说明</text> -->
              </view>
              <image class="right-image" @click="toDetail(goods_details_b)"
                src="https://sp.x-fmt.com//uploads/attach/2025/07/20250725/d346bfae13cbe2ce489028dc91c0bfae.png"
                mode="aspectFit"></image>
            </view>
          </view>
        </view>
        <view v-else>
          <view style="padding: 17rpx  30rpx;font-weight: 900;font-size: 40rpx;">
            <view class="text-content">
              <text class="main-text">{{score_b}}</text>
              <text class="sub-text" style="font-size: 25rpx;"> /缺乏状态</text>
            </view>
          </view>
          <view class="wzbj">
            <view class="container">
              <view class="text-content">
                <text class="main-text">{{b_time}}</text>
                <!-- <text class="sub-text">这里是辅助文字说明</text> -->
              </view>
              <image class="right-image" @click="showModal = true;bgi='1';"
                src="https://sp.x-fmt.com//uploads/attach/2025/07/20250725/152f6c851dfe983192aa51759270bbf8.png"
                mode="aspectFit"></image>
            </view>
          </view>
        </view>
      </view>

      <view class="container-but" style="width: auto;padding: 0;">
        <!-- 按钮 黑杠杠 -->
        <view class="image-btn-container" style="width: 100%;">
          <image style="width: 650rpx;margin: 76rpx 50rpx;height: 24rpx;"
            src="https://sp.x-fmt.com//uploads/attach/2025/07/20250725/8c96225af588722f3f6c332d66d0e81f.png"
            mode="widthFix" />
        </view>
      </view>


    </view>
    <view class="uni-p-b-98"></view>
    <pageFooter></pageFooter>

    <image-modal :show.sync="showModal" :imageUrl="qrcodeImage" :bgi="bgi" @close="onModalClose" />
  </view>
</template>

<script>
  const app = getApp();
  import tabBar from "@/pages/index/visualization/components/tabBar.vue";
  import pageFooter from '@/components/pageFooter/index.vue';
  import ImageModal from '@/components/image-modal.vue';

  import {
    getkFQrcode,
    getGoodsIds,
    getReport
  } from '@/api/page.js'

  export default {
    components: {
      tabBar,
      pageFooter,
      ImageModal,
    },
    computed: {},
    filters: {},
    mixins: {},
    data() {
      return {
        showModal: false,
        qrcodeImage: "https://sp.x-fmt.com//uploads/attach/2025/08/20250805/1909909c731c9c00bbc49519469157de.jpg",
        imageHeight: 300, // 默认高度，图片加载后会更新
        bgi: '1',
        bgi_bg: {
          "1": "https://sp.x-fmt.com//uploads/attach/2025/07/20250725/745990911d8fde5ef8730dc4c50ebf11.png",
          "2": "https://sp.x-fmt.com//uploads/attach/2025/07/20250725/7dd910fff37465e9fc895bc552b0becc.png"
        },
        date_time: '2000/01/01',
        goods_details_a: '0',
        goods_details_b: '0',
        goods_details_c: '0',
        has_a: false,
        has_b: false,

        a_time: '',
        b_time: '',

        score_a: 0,
        score_b: 0,

      }
    },
    created(options) {
      let that = this;
      that.date_time = this.getDateTime();
      // getkFQrcode().then(res => {
      // 	this.qrcodeImage = res.data.qrcode;
      // });
      getGoodsIds().then(res => {
        let data = res.data;
        this.goods_details_a = data.goods_details_a;
        this.goods_details_b = data.goods_details_b;
        this.goods_details_c = data.goods_details_c;
      });
      getReport().then(res => {
        let data = res.data;
        console.log(data);
        this.has_a = JSON.stringify(data.score_a) != '[]' && data.score_a['score'] && data.score_a[
          'score'] > 0;
        this.has_b = JSON.stringify(data.score_b) != '[]' && data.score_b['score'] && data.score_b[
          'score'] > 0;
        this.score_a = data.score_a['score'];
        this.score_b = data.score_b['score'];
        this.a_time = data.score_a['times'];
        this.b_time = data.score_b['times'];
      });
    },
    onLoad(option) {

    },
    onReady() {
      let self = this
    },
    onShow: function() {
      let that = this;
    },
    onPullDownRefresh() {},
    methods: {
      scanbar() {
        // 调起条码扫描
        uni.scanCode({
          scanType: ['barCode'],
          success: function(res) {
            console.log('res 内容：' + res);
            // uni.showToast({
            // 	title: res.result,
            // 	duration: 2000
            // });
            uni.navigateTo({
              url: `/pages/report/form?sample=${res.result}`
            });
          }
        });
      },
      onModalClose() {
        console.log('二维码关闭');
      },
      onImageLoad(e) {
        const {
          width,
          height
        } = e.detail
        uni.getSystemInfo({
          success: (res) => {
            this.imageHeight = height * (res.screenWidth / width)
          }
        })
      },
      handleButton1() {},
      // 当前时间字符串
      getDateTime() {
        // const date = new Date();
        // const year = date.getFullYear();
        // const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
        // const day = String(date.getDate()).padStart(2, '0');

        // return `${year}/${month}/${day}`;

        const date = new Date();
        return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`;
      },
      toDetail(id) {
        uni.navigateTo({
          url: `/pages/goods_details/index?id=${id}`
        });
      },
    },
  }
</script>

<style lang="scss">
  .container-but {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  .page {
    padding-bottom: 50px;
    background-color: #fafafa;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    padding: 30rpx;
    margin-top: 50rpx;
    width: 650rpx;
    box-sizing: border-box;
    margin: 20rpx auto 0;
    background-color: #fff;
    // font-size: 26rpx;
    font-weight: bold;
  }

  .container {
    position: relative;
    // min-height: 100vh;
  }

  .background-image {
    width: 100%;
    display: block;
  }

  /* 覆盖在图片上的按钮容器 */
  .button-overlay {
    position: absolute;
    bottom: 80rpx;
    /* 距离图片底部距离 */
    left: 0;
    right: 0;
    padding: 0 40rpx;
    display: flex;
    flex-direction: row;
    /* 改为横向排列 */
    justify-content: space-between;
    /* 按钮之间平均分布 */
    gap: 30rpx;
    z-index: 10;
  }

  .btn {
    position: relative;
    width: 320rpx;
    /* 设置固定宽度 */
    height: 90rpx;
    // border-radius: 45rpx;
    font-size: 32rpx;
    overflow: hidden;
    /* 确保背景图片不超出按钮边界 */
    padding: 0;
    background-color: transparent;
    border: none;
  }

  .btn-image {
    position: relative;
  }

  .btn-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .btn-text {
    position: relative;
    z-index: 1;
    color: #fafafa;
    /* 假设按钮文字是白色 */
    font-size: 32rpx;
  }

  button::after {
    border: none;
  }

  .modal-content_ {
    // width: 94%;
    // height: 360rpx;
    // margin: 3%;
    box-sizing: border-box;
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin: 32rpx 50rpx 0 50rpx;
    width: 650rpx;
    height: 330rpx;
  }

  // 文字布局

  .wzbj {

    .container {
      position: relative;
      // padding: 20rpx;
      height: 135rpx;
      /* 需要设置固定高度 */
    }

    .text-content {
      position: absolute;
      left: 20rpx;
      bottom: 20rpx;
      max-width: 70%;
    }

    .main-text {
      font-size: 32rpx;
      color: #333;
      line-height: 1.5;
    }

    .sub-text {
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }

    .right-image {
      position: absolute;
      right: 20rpx;
      // bottom: 20rpx;
      width: 200rpx;
      height: 135rpx;
      border-radius: 8rpx;
    }
  }
</style>